<template>
  <!-- 搜索框 -->
  <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
    <template #action>
      <div @click="onSearch">搜索</div>
    </template>
  </van-search>

  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image.bannerid">
      <img class="lunbo-item" :src="image.img" />
    </van-swipe-item>
  </van-swipe>

  <!-- 商品列表 -->
  <!-- 设置垂直间距 -->
  <van-row :gutter="[20, 20]" class="list">
    <!-- 使用组件 -->
    <ProductItem
      v-for="item in listArr"
      :key="item.id"
      :item="item"
      @click="$router.push('/detail?id=' + item.proid)"
    >
    </ProductItem>
  </van-row>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import axios from "axios";
import ProductItem from "@/components/ProductItem.vue";

let router = useRouter();

// 搜索框的值
let value = ref("");
//搜索函数
function onSearch() {
  console.log("搜索了", value.value);
  //路由跳转搜索结果页面--把输入框的值传入到搜索页面
  router.push("/search?word=" + value.value);
}

// 轮播图的数据源
const images = ref([]);
async function loadLunboData() {
  let LunboAPI = "http://localhost:3001/api/banner/list";
  let r = await axios.get(LunboAPI);
  console.log(r.data);
  images.value = r.data.data;
}
loadLunboData();

// 商品列表数据
const listArr = ref([]);

async function loadList() {
  let productListAPI = "http://localhost:3001/api/pro/list";
// 字段	类型	描述  count	Number  页码,默认值为1  limitNum	Number  每页显示个数,默认值为10

  let count = 1;
  let limitNum = 15;

  //await 会等后面的promsie请求成功以后，才会往下周
  let r = await axios.get(productListAPI, {
    params: {
      count: count,
      limitNum,
    },
  });
  console.log(r.data); //服务器返回的数据，里面还有一个data属性，是商品列表数据
  //修改了ref响应式数据，页面就会更新
  listArr.value = r.data.data;
}
loadList();
</script>

<style scoped>
.btn {
  width: 187.5px;
}
.lunbo-item {
  width: 375px;
}

.list {
  width: 355px;
  margin: 0 auto;
}
</style>
